<template>
    <div>
      <el-sub-menu :index="menu.id.toString()" v-if="menu.children">
        <template #title>
          <i class="el-icon-location"></i>
          <span>{{ menu.title }}</span>
        </template>
        <recursive-menu v-for="child in menu.children" :menu="child" :key="child.id" />
      </el-sub-menu>
      <el-menu-item :index="menu.id.toString()" v-else @click="jumpUrl(menu)">
        <span>{{ menu.title }}</span>
      </el-menu-item>
    </div>
  </template>
  
  <script>
  import { defineComponent } from 'vue'
//   import RecursiveMenu from './RecursiveMenu.vue'
  
  export default defineComponent({
    name: 'RecursiveMenu',
    components: {
    //   RecursiveMenu, // 继续引用递归菜单组件
    },
    props: {
      menu: {
        type: Object,
        required: true,
      },
    },
    methods: {
        jumpUrl(menu){
            const {path}  = menu;
            if(!path) return
            // console.log('path', menu.path)
            this.$router.push(path)
        }
    },
  })
  </script>